<ion-header no-border align-title="center">

  <ion-navbar color="primary">
    <ion-title mode="ios">{{room_name}}</ion-title>

    <ion-buttons end class="empty-button">
      <button ion-button >
        <ion-icon></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>

</ion-header>

<ion-content padding class="history-page-background">

  <ion-list *ngFor="let history of histories">
      <div class="history-list-wrapper" (click)="registerViewHistoryDetail(history)">
        <div padding>
          <div class="history-date-wrapper" [ngSwitch]="history.check_in_status">
            <div class="history-date-title">入住日期 至 退租日期</div>
            <div class="history-date-content" *ngSwitchCase="'2'">{{history.check_in_date}} - 至今</div>
            <div class="history-date-content" *ngSwitchCase="'1'">{{history.check_in_date}} - {{history.check_out_date}}</div>
            <div class="history-date-content" *ngSwitchCase="'0'">{{history.check_in_status_name}}</div>
          </div>
          <ion-grid>
            <ion-row justify-content-start>
              <ion-col col-4>
                联系人：
              </ion-col>
              <ion-col col-8>
                {{history.check_in_contact}}
              </ion-col>
            </ion-row>

            <ion-row justify-content-start>
              <ion-col col-4>
                联系电话：
              </ion-col>
              <ion-col col-8>
                {{history.check_in_mobile}}
              </ion-col>
            </ion-row>

            <ion-row justify-content-start>
              <ion-col col-4>
                押金：
              </ion-col>
              <ion-col col-8>
                {{history.check_in_deposit}}
              </ion-col>
            </ion-row>

            <ion-row justify-content-start>
              <ion-col col-4>
                租金：
              </ion-col>
              <ion-col col-8>
                {{history.check_in_rent}}
              </ion-col>
            </ion-row>

          </ion-grid>
        </div>
        <div class="history-detail-wrapper">
          <span>查看详情</span>
          <span>>></span>
        </div>
      </div>
  </ion-list>

  <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll>

</ion-content>
